<template>
	<view>
		<view class="status_bar"></view>
		<view class="status_bar_bottom"></view>
		<view class="viewHeader">
			<image v-if="navigatorType == 2" @click="goBack" class="leftIco" src="../../static/fanhui.png"></image>
			通讯录
			<image @click="BarButtonTap" class="rightIco" src="../../static/top_right.png"></image>
		</view>
		<view style="height: 45px;"></view>
		<view class="xw-book">
			<watermark></watermark>
			<uni-indexed-list-wx :options="list" @click="bindClick"></uni-indexed-list-wx>
		</view>
		<top-right-tool-wx ref="trtw"></top-right-tool-wx>
	</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				list: []
			}
		},
		computed: {
			navigatorType() {
				return this.$store.state.navigatorType;
			}
		},
		methods: {
			viewLoad(){
				
			},
			viewShow(){
				this.getflist()
				this.$store.dispatch('tabBarpull')
			},
			viewRefresh(){
				uni.stopPullDownRefresh();
			},
			viewBottom(){
				
			},
			viewScroll(e){
				
			},
			bindClick(e){
				uni.navigateTo({
					url:'../personInfo/detail?param='+e.item.data.userId
				})
			},
			getflist(){
				this.$http.request({
					url: '/friend/friendList',
					method: 'POST',
					data:JSON.stringify({}),
					success: (res) => {
						if (res.data.code == 200) {
							var data=res.data.data.data
                            //console.log(data);
							var list=[]
							for (var i = 0; i < data.length; i++) {
								var item=data[i]
								list.push({
									name:item.nickname,
									avatar:item.portrait,
									userId:item.fid,
									userType:item.userType,
									chatNo:item.chatNo
								})
							}
							this.list=this.$fc.sortList({list:list,key:'name'})
						}
					}
				});
			},
			BarButtonTap(){
				this.$refs['trtw'].showTab();
			},
			goBack(){
				uni.navigateBack();
			}
		},
	}
</script>
<style>
	.status_bar{
		height: var(--status-bar-height);
		width: 100%;
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		background: #FFFFFF;
	}
	.status_bar_bottom{
		width: 100%;
		height: var(--status-bar-height);
	}
	.viewHeader{
		width: 100%;
		height: 45px;
		line-height: 45px;
		text-align: center;
		color: #000;
		background: #FFFFFF;
		font-size: 18px;
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		z-index: 999;
	}
	.rightIco{
		position: absolute;
		right: 15px;
		width: 22px;
		height: 22px;
		top: 12px;
		vertical-align: bottom;
	}
	.leftIco{
		position: absolute;
		left: 20px;
		width: 18px;
		height: 18px;
		top: 13px;
		vertical-align: bottom;
	}
</style>